<template>
  <!--一个group-->
  <div>
    <a-divider>{{ group.title }}</a-divider>
    <a-row>
      <a-col :span="8">
        <a-checkbox
          v-if="group.child"
          :indeterminate="indeterminate"
          @change="onCheckAllChange"
          :checked="checkAll"
          >全选</a-checkbox
        >
      </a-col>
      <a-col :span="8">
        <a-checkbox
          :value="key"
          :disabled="true"
          :checked="checkLi"
          @change="onChangeLi"
          >{{ group.title }}</a-checkbox
        >
      </a-col>
    </a-row>
    <a-checkbox-group
      style="width: 100%"
      v-if="group.child"
      v-model="checkedList"
      @change="onChange"
    >
      <a-row>
        <a-col :span="24" v-for="(item, index) in group.child" :key="index">
          <a-col :span="8">
            <a-checkbox :value="item.id">{{ item.title }}</a-checkbox>
          </a-col>
          <a-col :span="8" v-for="(i, num) in item.child" :key="num">
            <a-checkbox :value="i.id">{{ i.title }}</a-checkbox>
          </a-col>
        </a-col>
      </a-row>
    </a-checkbox-group>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {
    group: {
      type: Object
    },
    defaultCheckedList: {
      type: Array
    }
  },
  data() {
    return {
      indeterminate: false,
      checkedList: [],
      checkAll: false,
      plainOptions: [],
      key: "",
      checkLi: false
    };
  },
  created() {},
  mounted() {},
  methods: {
    getCheckedList() {
      let allCheckList = JSON.parse(JSON.stringify(this.checkedList));
      if (this.checkLi) {
        allCheckList.push(this.key);
      }
      return allCheckList;
    },
    onChangeLi() {
      this.checkLi = !this.checkLi;
    },
    onChange(checkedList) {
      this.indeterminate =
        !!checkedList.length && checkedList.length < this.plainOptions.length;
      this.checkAll = checkedList.length === this.plainOptions.length;
      this.checkLi = checkedList.length > 0;
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked
          ? JSON.parse(JSON.stringify(this.plainOptions))
          : [],
        indeterminate: false,
        checkAll: e.target.checked
      });
      this.checkLi = this.checkedList.length > 0;
    },
    getAllOptionList() {
      if (this.group.child) {
        for (let key in this.group.child) {
          let item = this.group.child[key];
          this.plainOptions.push(item.id);
          if (item.child) {
            for (let i in item.child) {
              this.plainOptions.push(item.child[i].id);
            }
          }
        }
      } else {
        this.checkLi = true;
      }
    },
    getDefaultCheckList() {
      this.defaultCheckedList.find(val => {
        this.plainOptions.find(value => {
          if (value === val) {
            this.checkedList.push(value);
          }
        });
        if (val === this.key) {
          this.checkLi = true;
        }
      });
      this.indeterminate =
        !!this.checkedList.length &&
        this.checkedList.length < this.plainOptions.length;
      this.checkAll = this.checkedList.length === this.plainOptions.length;
    }
  },
  directives: {},
  filters: {},
  computed: {},
  watch: {
    group: {
      handler() {
        this.getAllOptionList();
        this.key = JSON.parse(JSON.stringify(this.group.id));
      },
      deep: true,
      immediate: true
    },
    defaultCheckedList: {
      handler() {
        if (this.defaultCheckedList) {
          this.getDefaultCheckList();
        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

<style scoped></style>
